new Vue({
  el: '#app',
  data() {
    return {
      myChart: null,
      option: null
    }
  },
  created() {
    
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await request.get('/user/getUserReport')
      console.log(res)
      this.myChart = echarts.init(this.$refs.report)
      this.option = {
        title: {
          text: "单位：个", // 主标题文本，支持使用 \n 换行
          textStyle: {
            color: "#808080", // 主标题文字的颜色
            fontSize: 12 // 主标题文字的字体大小
          },
          left: "20", // title 组件离容器左侧的距离
          top: "20" // title 组件离容器上侧的距离
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{c}个' // 提示框浮层内容格式器
        },
        xAxis: {
          type: 'category',
          data: res.data.months,
          axisLabel: {
            // 坐标轴字体颜色
            color: "#808080",
            fontSize: 12
          },
          axisLine: {
            show: false, // 是否显示
          },
          axisTick: { // y轴刻度线
            show: false // 是否显示
          },
          splitLine: { // 网格
            show: false // 是否显示
          }
        },
        yAxis: {
          min: 0,
          nameTextStyle: {
            color: '#808080',
            fontSize: 12,
          },
          axisLabel: {
            // 坐标轴字体颜色
            color: "#808080",
            fontSize: 12
          },
          axisLine: {
            show: false
          },
          axisTick: {
            // y轴刻度线
            show: false
          },
          splitLine: { // 网格
            show: true, // 是否显示
            lineStyle: {
              color: 'rgba(0,0,0,0.15)', // 颜色
            }
          }
        },

        series: [{
          type: 'line',
          symbolSize: 10,
          z: 1,
          label: {
            show: true, // 线条折点处显示值
            position: 'top', // 标签的位置
            color: "#808080", // 文字颜色
            fontSize: 12, // 文字像素
          },
          itemStyle: {
            color: '#325DEC' // 图形的颜色
          },
          lineStyle: {
            color: '#325DEC', // 线的颜色
            width: 1, // 线的宽度
          },
          data: res.data.number // 数据
        }]
      };
      this.myChart.setOption(this.option)
    }
  }
})